<template>
  <div class="tcm-prescription-box" v-if="activeTab == 'pharmacy-py'">
    <div class="tcm-title" v-if="info.dispenseStatus != '3'"><el-checkbox  @change="handleCheckChange" :disabled="info.dispenseStatus == '3'"  v-model="checked">{{info.rxName}} <span  style="margin-left: 30px;color: #333;">{{ info.storageName }}</span></el-checkbox></div>
    <div class="tcm-title" v-else>{{info.rxName}}
       <span  style="margin-left: 30px;color:#333 !important">{{ info.storageName }}</span>
    </div>
    <div class="tcm-header-row">
      <span>总量：<span>{{info.tcmInfo.totalDoses}}剂</span></span>
      <span>已配：<span class="tcm-blue">{{info.tcmInfo.dispenseQty}} 剂</span></span>

      <!-- {{info.tcmInfo.totalDoses }}  -->
      <span>本次配：<span class="tcm-blue tcm-bold"> {{info.tcmInfo.totalDoses - info.tcmInfo.dispenseQty}}剂</span></span>
      <span>{{info.tcmInfo.usageCodeText}}</span>
      <span>{{info.tcmInfo.frequencyCodeText}}</span>
      <!-- <span> {{info.tcmInfo.dosage}}{{info.tcmInfo.dosageUnitText}}</span> -->
      <span>每次{{info.tcmInfo.singleDosage }}ml</span>
      <span v-if="info.tcmInfo.remark">备注:{{info.tcmInfo.remark}}</span>
    </div>
    <div class="tcm-divider"></div>
    <div class="tcm-herb-list">
      <div v-for="(herb, idx) in info.tcmInfo.detailList" :key="idx">
        <div class="tcm-herb-item">
          <div class="herb-name tcm-herb-item_1">{{ herb.drugName }}</div>
          <div class="tcm-herb-item_2">
            <span class="herb-amount">{{ herb.dosage }}</span>
            <span class="herb-unit">{{herb.dosageUnitText}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
   <div class="tcm-prescription-box" v-else>
    <div class="tcm-title">{{info.rxName}}</div>
    <div class="tcm-header-row">
      <span>总量：<span>{{info.tcmInfo.totalDoses}}剂</span></span>
      <span>已发：<span class="tcm-blue">{{info.tcmInfo.deliveryQty}} 剂</span></span>
      <span>本次发：<span class="tcm-blue tcm-bold">{{info.tcmInfo.currentDeliveryQty }}剂</span></span>
      <span>{{info.tcmInfo.usageCodeText}}</span>
      <span>{{info.tcmInfo.frequencyCodeText}}</span>
       <span>每次{{info.tcmInfo.singleDosage }}ml</span>
      <span v-if="info.tcmInfo.remark">备注:{{info.tcmInfo.remark}}</span>
    </div>
    <div class="tcm-divider"></div>
    <div class="tcm-herb-list">
      <div v-for="(herb, idx) in info.tcmInfo.detailList" :key="idx">
        <div class="tcm-herb-item">
          <div class="herb-name tcm-herb-item_1">{{ herb.drugName }}</div>
          <div class="tcm-herb-item_2">
            <span class="herb-amount">{{ herb.dosage }}</span>
            <span class="herb-unit">{{herb.dosageUnitText}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
 const props = defineProps<{
  info: any;
  activeTab: string;
}>();
const checked = ref(false);
const activeTab = props.activeTab;
const info = props.info;

const formInfo = ref({
  rxId: info.rxId,
  tcmInfo: {
    currentDispenseQty: "",
  }
});
const emit = defineEmits(['closeDrawer']);
 
const handleCheckChange = () => {
  if (checked.value === true) {
    formInfo.value.tcmInfo.currentDispenseQty = info.tcmInfo.totalDoses;
    // //console.log(formInfo.value,'中药');
    
    emit('closeDrawer',formInfo.value);
  }else{
    emit('closeDrawer',{
      rxId: info.rxId,
      tcmInfo: {
        currentDispenseQty: "",
      }
    });
  }
};
if(info.dispenseStatus == '1'){
  checked.value = true;
  handleCheckChange();

}

</script>

<style scoped>
.tcm-prescription-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 #e9e9e9;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.tcm-title {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  background: #f8f8f8;
  height: 48px;
  line-height: 48px;
  padding: 0 14px;
  border-radius: 12px 12px 0 0;
}
.tcm-header-row {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 48px;
  background: #fff;
  font-size: 15px;
  color: #666;
  gap: 24px;
}
.tcm-header-row span {
  display: flex;
  align-items: center;
}
.tcm-blue {
  color: #16ada4;
}
.tcm-bold {
  font-weight: 700;
}
.tcm-divider {
  border-bottom: 1px solid #f0f0f0;
  margin: 0 0 0 0;
}
.tcm-herb-list {
  display: flex;
  gap: 24px;flex-wrap: wrap;
  padding: 24px;
}
.tcm-herb-item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  font-size: 16px;
  color: #222;
  min-width: 120px;
  border: 1px solid #e6e6e6;
}
.tcm-herb-item_1 {
  display: flex;
  align-items: center;
  background: #fafbfc;
  border-right: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  color: #222;
  min-width: 120px;
  justify-content: center;
}
.tcm-herb-item_2 {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  color: #222;
  min-width: 120px;
  justify-content: center;
}
.tcm-herb-item + .tcm-herb-item {
  margin-left: 16px;
}
.herb-name {
}
.herb-amount {
  margin-right: 4px;
}
</style>
